<template>
  <div class="main">

    <!--about me head-->
    <div class="tutor-detail" style="margin-bottom:0px;">
      <!--<a class="btn-open" href="javascript:;">开通分答</a>-->
      <div class="tutor">
        <div class="avatar">
          <div class="avatar" style="position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:inline-block;">
            <img style="position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="user.avatar">
            <span></span>
          </div>
        </div>
        <div class="nickname">{{ user.name}}</div>
      </div>
      <!--<div class="title"></div>-->
      <div class="introduction"></div>
      <div class="profile">
        <!--<p></p>-->
        <p class="highlight"></p>
        <p>提问免费， 偷听一律1元</p>
      </div>
    </div>

    <!--aboutMe 功能列表-->
    <div id="links">
      <ul class="me-items">
        <li class="item">
          <router-link class="link" to="/me/ask">
            <span class="ask"></span>
            <span class="text">我问</span></router-link>
        </li>

        <li class="item">
          <router-link class="link" to="/me/listen">
            <span class="listen"></span>
            <span class="text">我听</span></router-link>
        </li>


        <li class="item">
          <router-link class="link" to="/me/follow">
            <span class="follow"></span>
            <span class="text">我收听的大师</span></router-link>
        </li>
         <li v-show="user.is_professor==1" class="item">
          <router-link class="link" to="/me/answer">
            <span class="answer"></span>
            <span class="text">我回答的</span></router-link>
        </li>
        <li v-show="user.is_professor==0" class="first-item " style="padding-right: 0px;">
          <router-link class="link" to="/me/becomeprofessor" style="background:#28aef5;color: white;">
            <span class="professor"></span>
            <span class="text" style="margin-left: 1.5rem;">申请 成为大师</span></router-link>
        </li>

        <li class="first-item" >
          <router-link class="link" to="/feedback" >
            <span class="feedback"></span>
            <span class="text">问题反馈</span>
            </router-link>
        </li>
        <li class="item" >
          <router-link to="/about" class="link" > <span class="about"></span>
            <span class="text">关于</span></router-link>
        </li>

      </ul>
    </div>


    <customer-footer index="2"></customer-footer>
  </div>

</template>
<script>
    export default {


        data() {
            return {
                user: {
                    id: "",
                    name: '',
                    avatar: "/fengshui/static/pic/icon/people.png",
                    is_professor: 1
                }
            }
        },
        methods: {
            showAlert: function() {
                this.$vux.alert.show({
                    title: '提示！',
                    content: '敬请期待!'
                })
            }
        },
        created() {
            let vm = this;
            let params = {
                do: 'me'
            }
            vm.$http.jsonp(vm.url.acid, {
                params: params
            }).then(response => {
                let body = response.body;
                if (body.status == 'success') {
                    vm.user = body.data;
                } else {
                    vm.$vux.alert.show({
                        title: '错误提示！',
                        content: body.msg
                    })
                }
            }, response => {
                vm.$vux.alert.show({
                    title: '错误提示!',
                    content: '网络连接失败，请连网后重试'
                })
            });

        }
    }
</script>
<style scoped>
    a,
    img {
        -webkit-touch-callout: none;
        text-decoration: none;
    }
    
    .me-items {
        margin: .75rem 0 0;
    }
    
    li,
    ol,
    ul {
        list-style: none;
    }
    
    .tutor-detail {
        padding: .9rem;
        padding-bottom: .625rem;
        background: #fff;
        position: relative;
    }
    
    .tutor-detail .tutor .avatar {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .tutor-detail .profile p {
        text-align: left;
        font-size: .7rem;
        color: #999;
        line-height: 1.2rem;
    }
    
    .tutor-detail .tutor .nickname {
        font-size: .85rem;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .tutor-detail .tutor {
        padding: .25rem 4.5rem 0 3.25rem;
        position: relative;
        height: 2.65rem;
        line-height: 1.5;
    }
    
    .tutor-detail .profile {
        margin-top: .5rem;
    }
    
    .first-item,
    .item {
        background: #fff;
        padding-right: 1rem;
        border-bottom: 1px solid #f5f5f5;
    }
    
    .first-item .link,
    .item .link {
        font-size: .8rem;
        color: #3f3f3f;
        height: 2.75rem;
        line-height: 2.75rem;
        padding: 0 0 0 .85rem;
        display: block;
        text-decoration: none;
        background-image: url('/fengshui/static/pic/icon/more.png');
        background-size: .325rem .65rem;
        background-position: 100%;
        background-repeat: no-repeat;
    }
    
    .first-item .ask,
    .first-item .authentication,
    .item .ask,
    .item .listen,
    .item .answer,
    .item .follow,
    .item .about,
    .item .feedback,
    .first-item .feedback,
    .item .authentication {
        display: inline-block;
        vertical-align: middle;
        width: 1rem;
        height: 1rem;
        background-size: 1rem 1rem;
        background-position: 50%;
        background-repeat: no-repeat;
    }
    
    .first-item {
        margin-top: .75rem;
    }
    
    .first-item .text,
    .item .text {
        display: inline-block;
        vertical-align: middle;
        padding-left: .5rem;
    }
    
    .ask {
        background-image: url('/fengshui/static/pic/icon/ask.png');
    }
    
    .listen {
        background-image: url('/fengshui/static/pic/icon/listen.png');
    }
    
    .follow {
        background-image: url('/fengshui/static/pic/icon/follow1.png');
    }
    
    .feedback {
        background-image: url('/fengshui/static/pic/icon/feedback.png');
    }
    
    .answer {
        background-image: url('/fengshui/static/pic/icon/answer.png');
    }
    
    .about {
        background-image: url('/fengshui/static/pic/icon/about.png');
    }
</style>